<template>
  <div class="body">
    <div class="mainBox">
      <!-- 左侧盒子 -->
      <div class="column">
        <div class="panel index">
          <p>钢筋笼产线二级屏</p>
          <p>管片产线二级屏</p>
          <p>水养池二级屏</p>
          <p>堆场二级屏</p>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 1-->
      <div class="column">
        <div class="panel bar" style="height: 960px">
          <div class="no" style="height: 100px">
            <div class="no-bd">
              <ul>
                <li>钢筋笼生产累计</li>
                <li style="line-height: 60px">
                  83<label style="color: #077ec8">环</label>
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>管片生产累计</li>
                <li style="line-height: 60px">
                  83<label style="color: #077ec8">环</label>
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>管片出场累计</li>
                <li style="line-height: 60px">
                  83<label style="color: #077ec8">环</label>
                </li>
              </ul>
            </div>
          </div>
          <div style="height: 400px">
            <div class="chart" id="stock">图表</div>
          </div>
          <div style="height: 300px; border: #42b983 solid 1px">
            <div id="mount" style="height: 300px"></div>
          </div>
          <div class="no" style="height: 100px">
            <div class="no-bd">
              <ul>
                <li>工地累计拼装</li>
                <li style="line-height: 60px">
                  0<label style="color: #077ec8">环</label>
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>工地库存管片</li>
                <li style="line-height: 60px">
                  0<label style="color: #077ec8">环</label>
                </li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>劳务队实到人数</li>
                <li style="line-height: 60px">
                  54<label style="color: #077ec8">人</label>
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 中间盒子 2-->
      <div class="column">
        <div class="panel task" style="height: 480px">
          <h class="hd">当日任务&进度</h>
          <div class="task-bd" style="height: 360px">
            <div class="task-bd-item">
              <ul>
                <li>钢筋笼计划</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>80<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>钢筋笼生产</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>71<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>管片计划生产</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>80<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>管片实际生产</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>47<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>管片计划发货</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>0<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
            <div class="task-bd-item">
              <ul>
                <li>管片实际发货</li>
                <li style="line-height: 60px">
                  <label style="color: red">+</label>0<label
                    style="color: #077ec8; font-size: 25px"
                    >片</label
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel bar2" style="height: 480px">
          <div
            class="steam-chart"
            style="height: 300px; margin: auto; margin-bottom: 20px"
          >
            <div class="chart" id="steam" style="margin-top: 30px">图表</div>
          </div>
          <div class="steam-bottom" style="height: 120px">
            <div style="width: 150px; height: 100px; float: left">
              <ul>
                <li style="font-size: 22px; color: #077ec8">升温区湿度</li>
                <li
                  style="
                    font-family: electronicFont;
                    font-size: 50px;
                    line-height: 70px;
                    color: white;
                  "
                >
                  98<a style="color: red; font-size: 40px; font-family: Arial"
                    >%</a
                  >
                </li>
              </ul>
            </div>
            <div style="width: 150px; height: 100px; float: left">
              <ul>
                <li style="font-size: 22px; color: #077ec8">恒温区湿度</li>
                <li
                  style="
                    font-family: electronicFont;
                    font-size: 50px;
                    line-height: 70px;
                    color: white;
                  "
                >
                  98<a style="color: red; font-size: 40px; font-family: Arial"
                    >%</a
                  >
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <!-- 右侧盒子 -->
      <div class="column">
        <div class="panel bar2" style="height: 480px">
          <h2>年度（钢筋笼/管片）产量&发货（环）</h2>
          <div class="chart" id="output">图表</div>
          <div class="panel-footer"></div>
        </div>
        <div class="right-bottom">
          <div class="panel data" style="height: 466px">
            <header class="hd">水养池监视</header>
            <div class="data-bd" style="height: 360px">
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    总容量
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    80<label style="color: red; font-size: 20px">环</label>
                  </li>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    在养量
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    69<label style="color: red; font-size: 20px">环</label>
                  </li>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    水温
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    9.0<label style="color: red; font-size: 20px">℃</label>
                  </li>
                </ul>
              </div>
              <div class="data-bd-item">
                <ul>
                  <li
                    style="color: #077ec8; font-weight: bold; font-size: 26px"
                  >
                    PH值
                  </li>
                  <li
                    style="
                      line-height: 60px;
                      font-family: electronicFont;
                      font-size: 40px;
                      color: white;
                    "
                  >
                    9.3
                  </li>
                </ul>
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox" style="height: 200px">
      <div
        id="temperature-chart"
        style="height: 180px; border: red solid; width: 1920px; float: left"
      ></div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from "echarts";

export default {
  name: "EchartsC",
  setup() {
    onMounted(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("output"));
      var myChart3 = echarts.init(document.getElementById("stock"));
      var myChart4 = echarts.init(document.getElementById("steam"));
      var myChart5 = echarts.init(document.getElementById("temperature-chart"));
      var myChart6 = echarts.init(document.getElementById("mount"));
      const data = [
        [5000, 10000, 6785.71],
        [4000, 10000, 6825],
        [3000, 6500, 4463.33],
        [2500, 5600, 3793.83],
      ];
      // prettier-ignore
      const cities = ['机械故障', '通电故障', '等待配件', '通讯故障'];
      const barHeight = 50;
      // 绘制图表
      myChart2.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#000",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: ["管片生产", "管片发货", "钢筋笼生产"],
        },
        xAxis: [
          {
            type: "category",
            data: ["07月", "08月", "09月", "10月", "11月", "12月"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 15,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "管片生产",
            min: 0,
            max: 70,
            interval: 10,
            axisLabel: {
              formatter: "{value} 环",
              textStyle: {
                fontSize: 15,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
          {
            type: "value",
            name: "管片发货",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} 环",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "管片生产",
            type: "bar",
            barGap: "10%",
            barWidth: 28,
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 12,
              //柱子颜色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#1268f3", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#08a4fa", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#01ccfe", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "管片发货",
            type: "bar",
            barWidth: 28,
            barGap: "5%",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 12,
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 1,
                    color: "#f787e6", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#c169d5",
                  },
                  {
                    offset: 0,
                    color: "#a158cc", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "钢筋笼生产",
            type: "line",
            smooth: true,
            showSymbol: false,
            yAxisIndex: 1,
            data: [4.5, 6.3, 10.0, 15.0, 100.0, 6.2],
            itemStyle: {
              normal: {
                color: "#27cb52", //折点颜色
                lineStyle: {
                  width: 5,
                },
              },
            },
          },
        ],
      });
      myChart3.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#000",
            },
          },
        },
        grid: {
          left: "7%",
          right: "6%",
          bottom: "15%",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: ["水养池管片库存", "堆场管片库存", "脱模静置区管片库存"],
        },
        xAxis: [
          {
            type: "category",
            data: ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "F", "L1", "L2"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水养池管片库存",
            min: 0,
            max: 80,
            interval: 10,
            axisLabel: {
              formatter: "{value} 片",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
          {
            type: "value",
            name: "堆场管片库存",
            min: 0,
            max: 8,
            interval: 2,
            axisLabel: {
              formatter: "{value} 片",
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            // y轴的线条改为了 2像素
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            // y轴分割线的颜色
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(255,255,255)",
              },
            },
            axisTick: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "水养池管片库存",
            type: "bar",
            data: [60.0, 65.0, 68.0, 70.0, 69.0, 69.2, 70.1, 69.0, 69.2, 70.1],
            itemStyle: {
              // 修改柱子圆角

              barBorderRadius: 10,
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#1268f3", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#08a4fa", // 60% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#01ccfe", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "堆场管片库存",
            type: "bar",
            data: [2.6, 5.9, 9.0, 6.4, 6.0, 2.3, 6.4, 6.0, 2.3, 2.0],
            itemStyle: {
              // 修改柱子圆角
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 1,
                    color: "#f787e6", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#c169d5",
                  },
                  {
                    offset: 0,
                    color: "#a158cc", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: 10,
            },
          },
          {
            name: "脱模静置区管片库存",
            type: "line",
            itemStyle: {
              normal: {
                color: "#27cb52", //折点颜色
                lineStyle: {
                  width: 4,
                },
              },
            },
            smooth: true,
            yAxisIndex: 1,
            data: [6.0, 2.0, 3.0, 2.0, 4.0, 2.0, 3.0, 2.0, 4.0, 2.4],
          },
        ],
      });
      myChart4.setOption({
        title: {
          text: "蒸养窑监视",
          textStyle: {
            color: "white",
            fontSize: 30,
            fontWeight: "normal",
          },
        },
        grid: {
          top: "20%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: ["静养", "升温", "恒温", "降温", "大气"],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            show: false,
            type: "category",
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: {
          show: false,
        },
        series: [
          {
            name: "条",
            type: "bar",
            barWidth: 30,
            data: [70, 34, 60, 78, 69],
            xAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              color: "#1089E7",
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%",
            },
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 30,
            xAxisIndex: 1,
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 1,
              barBorderRadius: 15,
            },
          },
        ],
      });
      myChart5.setOption({
        title: {
          text: "蒸养窑环境温湿度日曲线",
          textStyle: {
            color: "white",
            fontSize: 30,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["静养", "升温", "恒温", "降温", "大气", "水养池"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "00:00",
              "02:00",
              "04:00",
              "06:00",
              "08:00",
              "10:00",
              "12:00",
              "14:00",
              "16:00",
              "18:00",
              "20:00",
              "22:00",
              "00:00",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 40,
            interval: 20,
          },
        ],
        series: [
          {
            name: "静养",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [8, 7, 6, 5, 9, 6, 7, 5, 8, 6, 7],
          },
          {
            name: "升温",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [2, 1, 3, 2, 1, 3, 2, 2, 0, 3, 4],
          },
          {
            name: "恒温",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [3, 4, 5, 2, 0, 2, 3, 1, 5, 2, 3],
          },
          {
            name: "降温",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [3, 4, 5, 2, 4, 2, 3, 2, 3, 2, 3],
          },
          {
            name: "大气",
            type: "line",
            stack: "Total",
            label: {
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [5, 9, 5, 6, 4, 6, 3, 8, 3, 5, 3],
          },
          {
            name: "水养池",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [8, 8, 5, 10, 6, 7, 3, 8, 5, 6, 8],
          },
        ],
      });
      myChart6.setOption({
        title: {},
        legend: {
          show: false,
        },
        grid: {
          top: 100,
        },
        angleAxis: {
          type: "category",
          data: cities,
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            const id = params.dataIndex;
            return (
              cities[id] +
              "<br>Lowest：" +
              data[id][0] +
              "<br>Highest：" +
              data[id][1] +
              "<br>Average：" +
              data[id][2]
            );
          },
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "transparent",
            },
            data: data.map(function (d) {
              return d[0];
            }),
            coordinateSystem: "polar",
            stack: "Min Max",
            silent: true,
          },
          {
            type: "bar",
            data: data.map(function (d) {
              return d[1] - d[0];
            }),
            coordinateSystem: "polar",
            name: "Range",
            stack: "Min Max",
          },
          {
            type: "bar",
            itemStyle: {
              color: "transparent",
            },
            data: data.map(function (d) {
              return d[2] - barHeight;
            }),
            coordinateSystem: "polar",
            stack: "Average",
            silent: true,
            z: 10,
          },
          {
            type: "bar",
            data: data.map(function (d) {
              return barHeight * 2;
            }),
            coordinateSystem: "polar",
            name: "Average",
            stack: "Average",
            barGap: "-100%", //两环重叠
            z: 10,
          },
        ],
      });
    });
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
.body {
  border: yellow solid 2px;
  background: url("../../assets/img/echartsBackGround.jpg");
}
.mainBox {
  border: 5px solid blue;
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px 10px 0;
}
.mainBox .column {
  flex: 3;
}
.mainBox .column:nth-child(2) {
  flex: 5;
  margin: 0 10px 10px;
  overflow: hidden;
}
.mainBox .column:nth-child(4) {
  flex: 4;
  margin: 0 10px 15px;
  overflow: hidden;
}
.mainBox .panel {
  position: relative;
  height: 310px;
  padding: 0 15px 40px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  margin-bottom: 15px;
  background-color: rgba(23, 33, 122, 0.2);
}
.mainBox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 3px solid white;
  border-top: 3px solid white;
  content: "";
}
.mainBox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 3px solid white;
  border-top: 3px solid white;
  content: "";
}
.mainBox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainBox .panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  content: "";
}
.mainBox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  content: "";
}
.mainBox .panel h2 {
  height: 48px;
  color: #fff;
  line-height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
}
.mainBox .panel h2 a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}
.mainBox .panel .chart {
  height: 100%;
}
.bottomBox {
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
}
.no {
  display: flex;
  position: relative;
  margin-top: 10px;
}
.no div {
  flex: 1;
}
.no-bd {
  position: relative;
  padding: 10px;
}
.no-bd::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  height: 60px;
  width: 5px;
  background-color: #123dbf;
}
.no-bd ul {
  display: flex;
  flex-direction: column;
}
.no-bd li {
  text-align: left;
  list-style: none;
  flex: 1;
}
.no-bd ul li:nth-child(1) {
  font-size: 20px;
  font-family: electronicFont;
  color: white;
}
.no-bd ul li:nth-child(2) {
  flex: 3;
  font-size: 30px;
  font-family: electronicFont;
  color: red;
}
.column .index {
  padding-top: 40px;
  height: 960px;
}
.column .index p {
  line-height: 60px;
  font-size: 40px;
  color: white;
  font-weight: bold;
}
.task-bd-item {
  width: 150px;
  height: 110px;
  margin-left: 10px;
  float: left;
  margin-top: 10px;
  padding-top: 15px;
  padding-left: 10px;
  background-color: rgba(22, 41, 144, 0.2);
}
.task-bd-item ul li:nth-child(1) {
  color: white;
  text-align: left;
  font-size: 20px;
}
.task-bd-item ul li:nth-child(2) {
  color: white;
  font-family: electronicFont;
  font-size: 45px;
}
.hd {
  color: white;
  font-size: 30px;
  height: 100px;
  line-height: 100px;
}
.right-bottom {
  display: flex;
}
.right-bottom div {
  flex: 1;
}
.data-bd {
  margin: auto;
}
.data-bd-item {
  width: 200px;
  height: 110px;
  margin-left: 22px;
  margin-top: 40px;
  float: left;
  padding-top: 15px;
  padding-left: 10px;
  background-color: rgba(22, 41, 144, 0.2);
}
.steam-bottom {
  display: flex;
  padding-top: 5px;
}
.steam-bottom div {
  flex: 1;
}
</style>
